<template>
	<div class="login-container" v-loading="logging">
		<!-- 品牌标识区 -->
		<div class="brand">
			<h1 class="title">博客后台</h1>
			<!-- <p class="subtitle">茶韵流转，预约从容</p> -->
		</div>

		<!-- 登录表单容器 -->
		<el-form ref="loginFormRef" :model="form" :rules="rules" @submit.prevent="handleLogin" >
			<!-- 手机号输入框 -->
			<el-form-item prop="phone">
				<el-input v-model="form.phone" placeholder="请输入绑定手机号" class="custom-input">
					<template #prefix>
						<span class="input-icon">
							<el-icon>
								<Iphone />
							</el-icon>
						</span>
					</template>
				</el-input>
			</el-form-item>

			<!-- 密码输入框 -->
			<el-form-item prop="password">
				<el-input v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="请输入登录密码"
					class="custom-input">
					<template #prefix>
						<span class="input-icon">
							<el-icon>
								<Lock />
							</el-icon>
						</span>
					</template>
					<template #suffix>
						<span class="eye-icon" @click="togglePassword">
							<el-icon v-if="showPassword">
								<View />
							</el-icon>
							<el-icon v-else>
								<Hide />
							</el-icon>
						</span>
					</template>
				</el-input>
			</el-form-item>

			<!-- 提交按钮 -->
			<el-button type="primary" native-type="submit" class="login-btn">
				登录
			</el-button>
		</el-form>
	</div>
</template>

<script setup>
	import {
		login
	} from '@/api/user.js'
	import {
		setToken
	} from '@/utils/token.js'
	import {
		ElMessage
	} from 'element-plus';
	import {
		ref,
		reactive
	} from 'vue';
	
	import {
		Iphone,
		View,
		Hide,
		Lock
	} from '@element-plus/icons-vue'
	import {
		useRouter
	} from 'vue-router';

	const router = useRouter();

	/**
	 * 表单数据（使用 reactive 创建响应式对象）
	 */
	const form = reactive({
		phone: '',
		password: ''
	})
	// 响应式数据
	const showPassword = ref(false)
	const logging = ref(false)
	const phoneError = ref('')
	const passwordError = ref('')
	/**
	 * 声明表单引用
	 */
	const loginFormRef = ref(null)
	/**
	 * 验证规则
	 */
	const rules = reactive({
		phone: [{
				required: true,
				message: '请输入手机号',
				trigger: 'blur'
			},
			{
				pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
				message: '请输入有效的11位手机号',
				trigger: ['blur', 'change']
			}
		],
		password: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码长度不能少于6位',
				trigger: 'blur'
			}
		]
	})

	/**
	 * 切换密码显示
	 */
	const togglePassword = () => {
		showPassword.value = !showPassword.value
	}

	/**
	 * 登录处理
	 */
	const handleLogin = async () => {
		logging.value = true

		try {
			await loginFormRef.value.validate()
			// 如果拦截器 reject，这里会跳转到 catch 
			const res = await login(form)
			// 确保数据结构正确（假设 token 在 res 中）
			setToken(res.data)
			if (res.code === 200) {
				logging.value = false
				ElMessage.success('登录成功')
				router.push('/home')
			}
		} catch (error) {
			// 此处会捕获拦截器 reject 的错误
			logging.value = false;
			// 可选：显示更具体的错误提示
			// ElMessage.error('登录失败: ' + error.message)
		}
	}

	const forgotPassword = () => alert('找回密码')
</script>

<style scoped>
	.login-container

	/* 修复1：表单容器定位 */
	.login-container {
		position: relative;
		min-height: 100vh;
		padding: 20px;
		/* 强制覆盖可能的继承样式 */
		background: #f5f7fa !important;
	}

	title .fab-button {
		position: absolute;
		right: -60px;
		bottom: 20px;
		width: 48px;
		height: 48px;
		background: #FFB6C1 !important;
		box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
		transition: all 0.3s;
	}

	.fab-button:hover {
		transform: scale(1.1);
	}

	/* 确保表单可见性 */
	.el-form {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	/* 强制显示输入框 */
	:deep(.el-input) {
		/* 定义CSS变量 */
		--el-input-border-color: #d6e4e3;
		--el-input-hover-border-color: #1a4746;
		--el-input-focus-border-color: #1a4746;
	}

	/* 背景与布局调整 */
	.login-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #F9FBF8 0%, #EFF3F2 100%);
		/* 更柔和的渐变 */
		padding: 24px;
	}

	/* 品牌标识优化 */
	.brand {
		text-align: center;
		margin-bottom: 48px;
		/* 增加间距 */
	}

	.subtitle {
		font-size: 14px;
		color: #6A9E9C !important;
		/* 青灰色 */
		margin-top: 12px;
		letter-spacing: 1px;
	}

	/* 表单容器调整 */
	.el-form {
		width: 100%;
		max-width: 400px;
		background: white;
		border-radius: 12px;
		/* 更大的圆角 */
		padding: 40px 32px;
		box-shadow: 0 8px 24px rgba(26, 71, 70, 0.08);
		/* 带色调的阴影 */
	}

	/* 输入框深度样式 */
	:deep(.el-input__wrapper) {
		border-radius: 8px !important;
		box-shadow: 0 0 0 1px var(--el-input-border-color) !important;
		transition: all 0.3s !important;
	}

	:deep(.el-input__wrapper:hover),
	:deep(.el-input__wrapper.is-focus) {
		box-shadow: 0 0 0 2px #1A4746 !important;
		/* 聚焦时深翡翠色 */
	}

	:deep(.el-input__inner)::placeholder {
		color: #9DBFBD !important;
		/* 与图标色系一致 */
		font-size: 14px;
	}

	/* 图标颜色适配 */
	.input-icon :deep(svg) {
		color: #6a9e9c !important;
		width: 1.2em !important;
		height: 1.2em !important;
	}

	/* 密码眼睛图标 */
	.eye-icon :deep(svg) {
		color: #6A9E9C !important;
		transition: color 0.3s;
	}

	.eye-icon:hover :deep(svg) {
		color: #1A4746 !important;
	}

	/*错误提示对齐图片样式 */
	:deep(.el-form-item__error) {
		padding-left: 24px;
		/* 匹配输入框缩进 */
		color: #d32f2f !important;
		font-size: 12px;
		background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="%23d32f2f" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 192a48 48 0 0 0-48 48v272a48 48 0 0 0 96 0V304a48 48 0 0 0-48-48zm0 384a48 48 0 1 0 0-96 48 48 0 0 0 0 96z"/></svg>') no-repeat left center/12px;
	}

	/* 登录按钮优化 */
	.login-btn {
		width: 100%;
		height: 48px;
		background: linear-gradient(135deg, #1A4746 0%, #2D6D6B 100%) !important;
		border: none !important;
		border-radius: 8px;
		color: white !important;
		font-size: 16px !important;
		letter-spacing: 2px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	:deep(.el-input__wrapper) {
		height: 44px !important;
	}

	.login-btn:hover:not(.is-disabled) {
		transform: translateY(-2px);
		box-shadow: 0 8px 16px rgba(26, 71, 70, 0.2) !important;
	}

	.login-btn.is-disabled {
		background: #C3D8D7 !important;
	}

	/* 字体修正 */
	/* 修正后的字体配置 */
	@font-face {
		font-family: 'ZiHunStyle';
		/* 统一字体名称 */
		src: url('../../assets/fonts/ZiHunJianQiShouShu.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	/* 应用字体到标题 */
	.title {
		font-family: 'ZiHunStyle', cursive !important;
		/* 确保使用自定义字体 */
		font-size: 28px;
		color: #1A4746;
	}
</style>